<!-- 订单 -->
<template>
	<view class="container">
		<view class="content">
			<view class="item" v-for="(item, index) in list" :key="index">
				<text class="value">{{item.value}}</text>
				<text class="label">{{item.label}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list = [
		{ label: '待付款', value: '50' },
		{ label: '待配货', value: '23' },
		{ label: '待取货', value: '37' },
		{ label: '待发货', value: '16' },
		{ label: '退款/售后', value: '8' },
	]
</script>

<style lang="scss" scoped>
	.container {
		padding: 28rpx 25rpx 0;
	}

	.content {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		background-color: white;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.value {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
				line-height: 1.5;
			}

			.label {
				font-size: 28rpx;
				color: #222222;
				line-height: 1.5;
				margin-top: 12rpx;
			}
		}
	}
</style>